<div id="history"> 
    <div class="list">
        <div class="title">历史列表 <span class="nums">{{list.length}}条</span></div>
        <div class="uls" v-if="list">
            <div class="item" 
                v-for="(item, index) in list "
                v-bind:class="{
                    isActive:item.isActive
                }"
                v-bind:title="item.type === 'custom' ? '用户保存于' + item.updateTime : '自动保存于' + item.updateTime"
                @click="selectData(item, index)">
                    <span class="name">{{item.updateTime | bm_time}}</span>
                    <span class="state" v-bind:class="{
                        custom:item.type === 'custom'
                        }"></span>
                </div>
        </div>
    </div>
    <div class="content">
      <p class="current-name" v-if="currentIndex > -1 && list && list[currentIndex]">
        {{"数据记录：" + list[currentIndex].updateTime }}</p>
      <img class="closeIcon"  @click="close()" src="@/assets/icon/close.svg" alt="">
      <div id="history-content">    
        <div class="onData" v-if="currentData.length ===0">
            {{currentIndex === -1 ? '请选择记录' :'当前记录没有数据'}}</div>
        <div class="comp-item"
            v-for="(item, index) in currentData" :key="index"
            v-bind:style="{
                width:item.style.width +'px',
                height:item.style.height +'px',
                top:(item.style.top) +'px',
                left:(item.style.left) +'px',
                position:item.style.position,
                borderWidth:item.style.borderWidth + 'px',
                transform: 'rotate('+ item.style.rotate +'deg)'
            }">
            <!-- 1.img -->
            <img class="comp-element comp-img icon"
            v-if="item.type === 'img'" 
            v-bind:src="item.icon" 
            v-bind:style="{
                width:item.style.width +'px',
                height:item.style.height +'px',
                borderRadius:item.style.borderRadius +'%'
            }">

            <!-- 2.line_colu  -->
            <div class="comp-element line comp-line_colu"
            v-if="item.type === 'line_colu'"
            v-bind:style="{
                height:item.style.height +'px'
            }">
            </div>

            <!-- 3.line_row  -->
            <div class="comp-element line comp-line_row"
            v-if="item.type === 'line_row'"
            v-bind:style="{
                with:item.style.width +'px'
            }">
            </div>

            <!-- 4.柱子 -->
            <div class="comp-element line comp-pillar comp-pillar-shadow "
            v-if="item.type === 'pillar'"
            v-bind:style="{
                height:item.style.height +'px',
                with:item.style.width +'px'
            }">

            </div>

            <!-- 5.盒子 -->
            <div class="comp-element line comp-room"
            v-if="item.type === 'room'"
            v-bind:style="{
                width:item.style.width +'px',
                height:item.style.height +'px',
            }">
            <span class="comp-room-inset"
                v-bind:style="{
                width:item.style.width +'px',
                height:item.style.height +'px',
                }"></span>
            </div>
            
            <!-- 6.设备 -->
            <div class="comp-element device comp-device"
            v-if="item.type === 'device'"
            v-bind:style="{
                width:item.style.width +'px',
                height:item.style.height +'px',
                background:item.style.background
            }">
            </div>

            <!-- 7.文本 -->
            <div class="comp-element device comp-text"
              v-if="item.type === 'text'"
              v-bind:style="{
                width:item.style.width +'px',
                height:item.style.height +'px',
                background:item.style.background
              }"
              v-bind:class="{
                isShadow:item.style.isApplyShadow ==='true',
                multipleActive:item.multipleActiveBool}">
                <div      
                  v-bind:style="{
                  width:item.style.width +'px',
                  height:item.style.height +'px',
                  fontSize:item.style.fontSize+'px',
                  background:item.style.background,
                  color:item.style.color || '#4f4f4f'
                }">{{item.value}}</div>
            </div>
        </div>
      </div>
      <div class="btns">
          <div class="btn delete"
            @click="deleteCurrnetData()">删除</div>
          <div class="btn apply"
            @click="applyCurrentData()">应用</div>
          <div class="btn close"
            @click="close()">关闭</div>
      </div>
    </div>
 </div>